import React, {Component} from 'react';
import './login.css'
import LoginIcon from './logo.svg'
import {Button, Form, Input, message} from 'antd';
import {reqLogin} from "../../api";
import memoryUtils from "../../utils/memoryUtil";
import storageUtils from "../../utils/storageUtil";

class Login extends Component {

    //子表单提交时触发
    onFinish = async (values) => {
        const {username,password} = values
        // axios.post('http://127.0.0.1:4523/m1/3646139-0-default/login',values).then((res)=>{
        //     console.log(res.data,'res')
        //     if(res.data.status){
        //         console.log('Success:', values);
        //         message.success('操作成功');
        //         memoryUtils.user=res.data //保存到内存里
        //         storageUtils.saveUser(res.data)//保存到local里
        //         this.props.history.replace('/admin')
        //     }else {
        //         alert('用户名或密码错误')
        //     }
        // })

        // reqLogin(username,password).then(
        //     response=>{
        //         console.log(response.data)
        //     }
        // ).catch((error)=>{})

        try {
            const response = await reqLogin(username,password)
            if(response.status){
                console.log('Success:', values);
                message.success('操作成功');
                memoryUtils.user=response.data //保存到内存里
                storageUtils.saveUser(response.data)//保存到local里
                this.props.history.replace('/admin')
            }else {
                message.error('用户名或密码错误');
            }
        } catch {
            message.error('用户名或密码错误');
            // console.log('用户名或密码错误')
        }

    };
    //子表单字段更新时触发
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return (
            <div className="login">
                <div className="header">
                    <img src={LoginIcon} alt="logo" style={{width:40,height:40}}/>
                    <span style={{fontSize:30}}>React项目：后台管理系统</span>
                </div>
                <div className="body">
                    <h2>用户登录</h2>
                    <Form
                        name="basic"
                        labelCol={{span: 8,}}
                        wrapperCol={{span: 16,}}
                        style={{maxWidth: 600,}}
                        initialValues={{remember: true,}}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        {/*1).必须输入*/}
                        {/*2).必须人于4位*/}
                        {/*3)。必须小于12位*/}
                        {/*4)必须是英文、数宁或下划线组成.*/}
                        {/*声明式验证：用现成定义好的*/}
                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {required: true,whitespace:true, message: '请输入密码!',},
                                {max: 12, message: '必须小于12位',},
                                {min: 4, message: '必须大于4位',},
                                {pattern: /^[a-zA-Z0-9_]+$/, message: '必须是英文、数宁或下划线组成',},
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Login;